<template>
  <el-dialog title="课题详情" :visible.sync="dialogVisible" width="550px" @open="onDialogOpen">
    <el-row class="row" :gutter="20">
      <el-col>
        <span>课题编号：{{topicInfo.topNo}}</span>
      </el-col>
    </el-row>
    <el-row class="row" :gutter="20">
      <el-col>
        <span>课题名称：{{topicInfo.topName}}</span>
      </el-col>
    </el-row>
    <el-row class="row" :gutter="20">
      <el-col>
        <span>课题性质：{{topicInfo.topProperty}}</span>
      </el-col>
    </el-row>
    <el-row class="row" :gutter="20">
      <el-col>
        <span>课题类别：{{topicInfo.topCategory}}</span>
      </el-col>
    </el-row>
    <el-row class="row" :gutter="20">
      <el-col>
        <span>课题状态：{{topicInfo.topStateDesc}}</span>
      </el-col>
    </el-row>
    <el-row class="row" :gutter="20">
      <el-col>
        <span>所属学院：{{topicInfo.colName}}</span>
      </el-col>
    </el-row>
    <el-row class="row" :gutter="20">
      <el-col>
        <span>发布时间：{{topicInfo.gmtCreate}}</span>
      </el-col>
    </el-row>
    <el-row class="row" :gutter="20">
      <el-col>
        <span>更新时间：{{topicInfo.gmtModify}}</span>
      </el-col>
    </el-row>
    <el-row class="row" :gutter="20">
      <el-col>课题内容：</el-col>
    </el-row>
    <el-row class="row" :gutter="20">
      <el-col>
        <el-input type="textarea" :rows="8" v-model="topicInfo.topContent" disabled></el-input>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: 'TopicInfoDialog',
  props: {
    visible: Boolean,
    topNo: String
  },
  data () {
    return {
      dialogVisible: false,
      topicInfo: {}
    }
  },
  watch: {
    visible () {
      this.dialogVisible = this.visible
    },
    dialogVisible () {
      this.$emit('update:visible', this.dialogVisible)
    }
  },
  methods: {
    onDialogOpen () {
      this.$axios.get(`/api/topic/${this.topNo}`)
        .then(response => {
          let result = response.data
          if (result.success) {
            this.topicInfo = result.data
          } else {
            this.$message.error(result.msg)
          }
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
.row {
  margin: 15px;
}
</style>
